@import '~antd/lib/style/themes/default.less';
:global {
  @bg-gray: #f5f5f5;
  @placeholder-color-1: #111;
  @placeholder-color-2: #cecece;
  @sa-color-111: #111;
  @sa-color-333: #333;
  @body-font-family: 'lucida grande', 'lucida sans unicode', lucida, helvetica,
    'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
  .iPlaceholder(@color: #111) {
    input::-webkit-input-placeholder,
    input::-moz-placeholder,
    input:-ms-input-placeholder,
    input::placeholder {
      color: @color;
    }
  }
  .ant-legacy-form-item {
    width: 100%;
    display: flex;
    margin-right: 0;
    margin-bottom: 16px;
  }
  #new-search-area {
    margin: -24px -32px 0px;
    padding: 12px 24px;
    height: 48px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
    z-index: 300;
    border-top: 1px solid rgb(221, 226, 232);
    background-color: #fcfcfc;
    color: @sa-color-333;
    font-family: 'lucida grande', 'lucida sans unicode', lucida, helvetica,
      'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
    .margin-bottom-8 {
      margin-bottom: 8px;
    }
    &.expand {
      height: auto;
    }
    .margin-right-8 {
      margin-right: 8px;
    }
    .margin-right-24 {
      margin-right: 24px;
    }
    .position-relative {
      position: relative;
      font-size: 0;
    }
    .position-absolute {
      position: absolute;
      left: 0;
      right: 0;
      font-size: 12px;
      font-family: @body-font-family;
    }
    .inputSpanText {
      opacity: 0;
      display: inline-block;
      font-size: 12px;
      font-family: @body-font-family;
      padding: 0px 8px;
    }
    div.select-solution,
    div.select-solution.ant-select-focused:not(.ant-select-disabled).ant-select {
      .ant-select-selector {
        background-color: #fcfcfc;
        border: none;
        box-shadow: none;
        .ant-select-selection-item {
          color: @sa-color-333;
          .filter-condition-icon {
            display: none;
          }
        }
      }
    }
    .ant-select-focused:not(.ant-select-disabled) {
      .ant-select-selector {
        .ant-select-selection-placeholder {
          color: #bbb;
        }
      }
    }
    .ant-cascader-picker-arrow {
      right: 8px !important;
    }
    .valueNull {
      .ant-select-selector {
        .ant-select-selection-placeholder {
          padding-right: 0;
        }
      }
    }
    .notAllowClear {
      .ant-select-selector {
        .ant-select-selection-item {
          padding-right: 0;
        }
      }
    }
    .ant-legacy-form-item-children,
    .ant-form-item-control-input-content {
      input:focus::placeholder {
        color: #bbb;
      }
    }
    .first-row {
      width: 100%;
      .ant-select-selector {
        padding-left: 8px;
        padding-right: 0px;
        .ant-select-selection-item .filter-condition {
          .margin-right-8 {
            font-weight: 700;
          }
        }
      }
      .ant-select-arrow {
        padding-right: 9px;
      }
    }
    .btnBox button:last-of-type {
      margin-right: 15px;
    }
    .btnBG {
      width: 24px;
      height: 24px;
      display: block;
      position: relative;
      border-radius: 3px;
      z-index: 1;
      .themeBG {
        background: @primary-color;
        opacity: 0.1;
        width: 24px;
        height: 24px;
        position: absolute;
        z-index: 1;
        border-radius: 3px;
      }
    }
    .expand-icon {
      position: relative;
      z-index: 100;
      transform: rotate(360deg);
      transition: transform 0.3s;
      left: 5px;
      top: 1px;
      svg > g > g {
        fill: @primary-color !important;
      }
    }
    .expand-icon.expand {
      transform: rotate(180deg);
    }
    .rotate-icon {
      position: relative;
      z-index: 100;
      transition: transform 0.3s;
      margin-top: 1px;
      left: 6px;
      top: 1px;
      svg > g > g {
        fill: @primary-color !important;
      }
    }
    .reset-icon {
      position: relative;
      z-index: 100;
      // left: 5px;
      // top: 3px;
      svg > g > g {
        fill: @primary-color !important;
      }
    }
    .search-form-item-label {
      color: #606c80;
      font-weight: 400;
    }
    .screening-button {
      display: inline-block;
      padding: 0px 12px;
      line-height: 32px;
      border-radius: 4px 4px 0px 0px;
      color: #1890ff;
      cursor: pointer;
    }
    .screening-button.ant-popover-open {
      background: @bg-gray;
    }

    .common-field-item-style() {
      position: relative;
      cursor: pointer;
      .ant-legacy-form-item {
        display: inline;
        .ant-form-item {
          line-height: 32px;
          margin-right: 0;
          margin-bottom: 0 !important;
        }
        .ant-legacy-form-item-children,
        .ant-form-item-control-input-content {
          display: flex;
          .ant-input,
          .ant-picker,
          .ant-input-number-input {
            padding: 4px 8px;
          }
          .ant-picker {
            .ant-picker-input {
              input {
                font-size: 12px;
              }
              .ant-picker-clear {
                background-color: transparent;
                .anticon-close-circle {
                  position: relative;
                  right: -4px;
                  opacity: 0;
                }
              }
            }
          }
          .ant-input-number {
            .ant-input-number-handler-wrap {
              .ant-input-number-handler {
                width: 15px;
                margin-left: 6px;
                position: relative;
                border-left: 1px solid transparent;
                background-color: #dae3eb;
                .ant-input-number-handler-up-inner {
                  position: relative;
                  left: 0px;
                }
                .ant-input-number-handler-down-inner {
                  position: relative;
                  left: 0px;
                }
              }
              .ant-input-number-handler-down {
                border-top: 1px solid #eaecf2;
              }
            }
            .ant-input-number-input-wrap {
              input {
                height: 22px;
                &::placeholder {
                  color: #a1a4a8;
                }
              }
            }
          }
          .ant-select-selector,
          .ant-picker,
          .ant-input,
          .ant-cascader-picker {
            border: none;
            box-shadow: none;
            background: none;
          }
          .label {
            padding-left: 12px;
            margin-right: -5px;
            color: #666666;
            + .ant-space-vertical {
              flex: 1;
              color: @sa-color-111;
            }
          }
          .value {
            flex: 1;
            color: @sa-color-111;
            .ant-select-selector {
              .ant-select-selection-search {
                left: 10px;
              }
            }
          }
          .value.inputValue,
          .value.pickerValue,
          .value.lovValue .lov-wrap input,
          .value.lovValue.single-value .ant-select {
            font-size: 12px;
            border-radius: 2px;
            margin-top: 5px;
            height: 22px;
            background: #eaecf2;
            margin-left: 11px;
            margin-right: 12px;
            &::placeholder {
              color: #a1a4a8;
            }
            &:hover {
              background: #dee0e6;

              .ant-select-selection-item {
                background: #dee0e6;
              }
            }
          }
          .value.lovValue.single-value {
            .ant-space {
              .lovDropIcon {
                position: relative;
                left: 2px;
              }
            }
            .ant-select {
              margin-right: 0px;
            }
            .ant-select-selection__clear.lov-clear:hover + .ant-input {
              background: #dee0e6;
            }
          }
          .selectDownIcon {
            position: relative;
            left: -8px;
            padding-right: 0px;
          }
          .value.lovValue .lov-wrap {
            input {
              margin-right: 4px;
            }
            .iPlaceholder;
            .lov-clear {
              height: 22px;
            }
            .lov-clear {
              line-height: 27px;
              opacity: 1;
            }
          }
          .value.lovValue.multiple-value .ant-select {
            .ant-select-selector {
              padding-right: 0;
            }
          }
          .value.lovValue .ant-select {
            .ant-select-selector {
              line-height: 22px;
              height: 22px;
              padding: 0 8px;
              .ant-select-selection-search {
                line-height: inherit;
                height: inherit;
                input {
                  line-height: inherit;
                  height: inherit;
                }
              }
              .ant-select-selection-item {
                line-height: inherit;
              }
              .ant-select-selection-placeholder {
                line-height: inherit;
                height: inherit;
              }
              .ant-select-selection-overflow-item-rest {
                .ant-select-selection-item {
                  margin: 0;
                  height: 22px;
                  line-height: 22px;
                  border: none;
                  background-color: #eaecf2;
                }
              }
            }
          }
          .value.lovValue .ant-space-item {
            .multiple-tag {
              .ant-tag,
              .ant-select-selection-item {
                height: 22px;
                line-height: 22px;
                margin-top: 0;
                margin-bottom: 0;
                background-color: #eaecf2;
                font-size: 12px;
              }
              .ant-tag:hover {
                background-color: #dee0e6;
              }
            }
            .caret-down {
              margin-left: -6px;
            }
          }
          .value.inputValue {
            .ant-select-selector {
              height: inherit;
              line-height: 22px;
              padding: 0 8px;
              &::after {
                line-height: 22px;
              }
              .ant-select-selection-item,
              .ant-select-selection-search,
              .ant-select-selection-placeholder,
              .ant-select-selection-search input {
                line-height: inherit;
                height: inherit;
              }
            }
          }
          .value.inputValue.ant-cascader-picker {
            input {
              line-height: 22px;
              height: 22px;
              font-size: 12px;
            }
          }
          .value.pickerValue {
            margin-right: 24px;

            .ant-picker-input {
              input::placeholder {
                color: #a1a4a8;
              }
              .ant-picker-suffix {
                pointer-events: unset;
              }
            }
          }
          .value.ant-select {
            width: 100%;
            min-width: 42px;
          }
          .ant-space-item {
            .select-part-load {
              width: auto;
              min-width: 42px;
            }
          }
          .ant-select-multiple {
            .ant-select-selector {
              min-width: 48px;
            }
          }
          .ant-select-multiple.ant-select-show-search {
            div.ant-select-selection-search {
              width: 34px !important;
            }
          }
          .ant-picker-clear {
            background-color: @bg-gray;
          }
          .ant-input-number {
            border: none;
            box-shadow: none;
            background: unset;
            .ant-input-number-handler-wrap {
              background: unset;
            }
          }
          .value.inputValue {
            .lov-wrap {
              line-height: 22px;
              & > div {
                line-height: inherit;
                height: inherit;
                input {
                  padding: 0;
                  font-size: 12px;
                }
              }
            }
          }
          .lov-wrap {
            .ant-input-group-wrapper {
              top: 0;
              input {
                width: 110px;
              }

              .ant-input-group-addon:last-child {
                left: 0;
              }
              .ant-input-search-button {
                border: none;
                background: none;
              }
            }
            .ant-input-affix-wrapper {
              border: none;
              background-color: unset;
              top: 0;
              // input {
              // width: 110px;
              // }
              .ant-btn {
                background-color: unset;
              }
              & + .ant-select-selection__clear {
                right: 11px !important;
                top: 1px !important;
              }
            }
            .ant-select-selection__clear {
              right: 33px !important;
            }
          }
        }
      }
      .ant-select {
        .ant-select-selector {
          background-color: unset !important;
        }
        .ant-select-arrow {
          margin-top: -7px;
          margin-right: -4px;
        }
      }
      .multiple-tag {
        .ant-select-arrow {
          margin-top: -5px;
        }
      }
      .ant-tag-close-icon {
        margin-right: 2px;
        line-height: 19px;
      }
      .custom-select-down-icon {
        margin: 10px 8px 0 0;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.25);
      }
      &:hover {
        border-radius: 4px;
        .ant-legacy-form-item-children,
        .ant-form-item-control-input-content {
          background-color: @bg-gray;
        }
        .delete-icon {
          display: block;
        }
        .ant-legacy-form-item {
          .ant-legacy-form-item-children,
          .ant-form-item-control-input-content {
            .lov-wrap {
              .ant-input-group-wrapper {
                .ant-input-search-button {
                  background-color: @bg-gray;
                }
              }
            }
          }
        }
      }
    }

    .fixed-field-form-items {
      display: contents;
      .fixed-field {
        .common-field-item-style;
      }
      &::after {
        content: '';
        display: block;
        clear: both;
      }
    }
    .default-field-form-items {
      display: contents;
      line-height: 32px;
      .ant-select-selection-placeholder {
        color: @placeholder-color-1;
      }

      input::-webkit-input-placeholder,
      input::-moz-placeholder,
      input:-ms-input-placeholder,
      input::placeholder {
        color: @placeholder-color-1;
      }
      .ant-cascader-menus {
        .iPlaceholder(@placeholder-color-2);
      }
      .default-field {
        .common-field-item-style;
        .delete-icon {
          position: absolute;
          top: -6px;
          left: -6px;
          font-size: 14px;
          display: none;
          color: #b2b8c0;
        }
      }
    }
    .fixed-field {
      .ant-select-selector {
        .ant-select-selection-placeholder {
          color: @placeholder-color-1;
        }
      }
    }
    .filter-condition {
      color: @sa-color-111;
      position: relative;
      .filter-condition-icon {
        float: right;
        margin-top: 4px;
        display: none;
      }
      &::after {
        content: '';
        display: block;
        clear: both;
      }
      &:hover {
        .filter-condition-icon {
          display: block;
        }
      }
    }
    .edit-btn {
      height: 24px;
      padding: 0 6px;
      font-size: 12px;
      line-height: 24px;
      border: 1px solid #d9d9d9;
      border-radius: 2px;
      min-width: unset;
      color: @sa-color-333;
    }
    .edit-btn:not(:last-of-type) {
      margin-right: 8px;
    }
    .new-solution-bubble {
      .ant-popover-message-title {
        padding-left: 0;
        color: @sa-color-333;
      }
      .ant-popover-inner-content {
        padding: 16px 24px;
      }
      .ant-popover-buttons {
        .ant-btn {
          color: @sa-color-333;
        }
        .ant-btn-primary {
          color: #fff;
        }
      }
    }
  }
  .search-area-popover {
    .close-icon {
      margin-top: 4px;
      float: right;
    }
    .ant-popover-title {
      padding: 14px 16px;
      font-weight: 600;
      color: #212d40;
    }
    .ant-popover-inner-content {
      padding: 12px 16px 0;
      .ant-legacy-form-item {
        display: block;
        .ant-form-item-label,
        .ant-legacy-form-item-label {
          font-weight: 600;
          color: #212d40;
          label::after {
            content: '';
          }
        }
        .ant-form-item-control-input,
        .ant-legacy-form-item-control-wrapper {
          max-width: 100%;
        }
      }
      .btn-footer {
        margin: 0 -16px;
        padding: 12px 16px;
        border-top: 1px solid #f0f0f0;
        text-align: right;
        .margin-right-8 {
          margin-right: 8px;
        }
      }
    }
  }
  .search-area-popover.ant-popconfirm {
    width: 272px;
    .ant-popover-inner-content {
      padding: 0;
      .ant-popover-message-title {
        padding: 0;
        .popconfirm-title {
          height: 48px;
          line-height: 48px;
          padding: 0px 16px;
          font-weight: 600;
          border-bottom: 1px solid #f0f0f0;
          color: #212d40;
          .close-icon {
            margin-top: 17px;
          }
        }
        .popconfirm-content {
          padding: 16px 16px 0;
          .popconfirm-label {
            margin-bottom: 8px;
            font-weight: 600;
            color: #212d40;
          }
        }
      }
      .ant-popover-buttons {
        padding: 12px 16px;
        margin-bottom: 0;
        border-top: 1px solid #f0f0f0;
      }
    }
  }
  .custom-default-tag-color {
    border-radius: 3px;
    background: #ffffff;
    border-color: #dadfe6;
    color: #606c80;
  }
  .custom-edit-tag {
    position: relative;
    top: -2px;
    line-height: 16px;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 3px;
    border: none;
    color: @sa-color-333;
    background: #f0f0f0;
  }
  .ant-select-selection-item {
    .custom-default-tag-color {
      display: none;
    }
  }
  .dynamic-sel-field-btn-popover {
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
    width: 238px !important;
    .ant-popover-title {
      padding: 5px 12px 4px;
      .ant-input-affix-wrapper {
        padding: 4px 0;
        border: none;
      }
      .ant-input-prefix {
        margin-right: 12px;
      }
      .ant-input-affix-wrapper:focus,
      .ant-input-affix-wrapper-focused {
        box-shadow: none;
      }
    }
    input::placeholder {
      color: @placeholder-color-2;
    }
    .ant-popover-inner-content {
      padding: 0;
      .custom-popover-subtitle {
        padding: 8px 12px;
        font-size: 12px;
        border-bottom: 1px solid #f0f0f0;
      }
      .custom-popover-content {
        padding: 8px 0px 10px;
        max-height: 248px;
        margin-bottom: 48px;
        overflow-y: auto;
        .field-item {
          padding: 5px 16px;
          .ant-checkbox-wrapper {
            display: flex;
          }
          &:hover {
            background-color: rgb(240, 247, 255);
          }
        }
      }
      .custom-popover-footer {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 12px;
        border-top: 1px solid #e9e9e9;
        background: #fff;
      }
      .float-right {
        float: right;
      }
    }
  }
  .field-value-required .label:before {
    display: inline-block;
    margin-right: 4px;
    color: #ff4d4f;
    font-size: 14px;
    line-height: 1;
    content: '*';
  }
  .search-area-select.ant-select-dropdown {
    padding-top: 0;
    .search-area-select-dropdown {
      .select-dropdown-title {
        padding: 5px 12px 4px;
        border-bottom: 1px solid #f0f0f0;
        .ant-input-affix-wrapper {
          padding: 4px 0;
          border: none;
          input {
            padding: 0 !important;
          }
        }
        .ant-input-prefix {
          margin-right: 12px;
        }
        .ant-input-affix-wrapper:focus,
        .ant-input-affix-wrapper-focused {
          box-shadow: none;
        }
      }
      .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
        background-color: rgb(240, 247, 255);
      }
      .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
        background-color: fade(@primary-color, 10%);
      }
    }
  }
  .search-area-tree-select-dropdown {
    .ant-select-tree .ant-select-tree-node-content-wrapper:hover {
      background-color: rgb(240, 247, 255);
    }
  }
}
